Click to Hide

Click to make disappear

Drop Down

test1
test2
test3

Click Here
row1
row2
row3

Move mouse over to change the background color

SAMPLE CODE

$("button#b1").click(function() {
   alert('You clicked on the button');
	 $("img").hide();
  });
	
	$("h2#idH2").click(function() {
   alert('You clicked on the H2');
	 $("img").hide();
  });
	
	$("input#idText").click(function() {
   alert('You clicked on the Text box');
	 $("img").hide();
  });
	
	$("input#idSubmit").click(function() {
   alert('You clicked on the submit button');
	 $("img").hide();
  });
	
	$("h3#idH3").click(function() {
   alert('You clicked on the h3 heading');
	 $("ul").toggle();
  });
	
  $("th#idTH").click(function() {
   alert('You clicked on the TH heading');
	 $("td#idTD1").toggle();
	 $("td#idTD2").toggle();
	 $("td#idTD3").toggle();
  });
	
	$("h5").on("mouseover", function() {
    $(this).css("background-color", "red");
  });
  $("h5").on("mouseout", function() {
    $(this).css("background-color", "grey");
  });
 
});

</script>

<button id="b1">Click to make disappear</button>
<h2 id="idH2">Click to make disappear</h2>
<input id="idText" type="text"/>
<br><br>
<input id="idSubmit" value = "Click to Submit" type="submit">
<br>
<h3 id="idH3">Drop Down</h3>
<ul id="goAwayul">
<li>test1</li>
<li>test2</li>
<li>test3</li>
</ul>

<tr><th id="idTH">Click Here</th></tr>
<tr><td id="idTD1">row1</td></tr>
<tr><td id="idTD2">row2</td></tr>
<tr><td id="idTD3">row3</td></tr>
</table>

<h5> Move mouse over to change the background color </h5>